<template>
  <div class="test-results">
    <div class="shade"></div>
    <div class="popup">
      <div class="title justify-content-between">
        <span class="fs28 colorFFF">试验结果</span>
        <img src="../assets/images/icon-close.png" @click="cancel" />
      </div>
      <div class="content">
        <div class="c-title justify-content-between">
          <span class="fs24 color161D2E">{{ taskData.matchNames }}</span>
          <div class="flex">
            <div class="btn" v-loading="reportLoading" @click="exportFile">
              <img src="../assets/images/icon-export.png" />
              <span>报告生成</span>
            </div>
          </div>
        </div>
        <div class="flex mt18">
          <!-- <div class="align-item-center">
            <span class="fs18 color505971">下发任务：</span>
            <el-select
              v-model="taskId"
              placeholder="请选择"
              size="small"
              @change="getTestResult"
            >
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.matchName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div> -->
          <div class="align-item-center">
            <span class="fs18 color505971">环节：</span>
            <el-select
              v-model="modelType"
              placeholder="请选择"
              size="small"
              @change="getTestResult"
            >
              <el-option label="设备齐套" value="SBQT"></el-option>
              <el-option label="设备展开" value="SBZK"></el-option>
              <el-option label="单机功能测试" value="DJGN"></el-option>
              <el-option label="单项功能测试" value="DXGN"></el-option>
              <el-option label="系统性能测试" value="XTXN"></el-option>
            </el-select>
          </div>
        </div>
        <div v-if="modelType == 'SBQT' || modelType == ''">
          <div class="theader justify-content-between">
            <div class="w500">序号</div>
            <div class="w1000">设备代号</div>
            <div class="w1000">设备名称</div>
            <div class="w1000">试验项目</div>
            <div class="w1000">测试项</div>
            <div class="w1000">检查判据</div>
            <div class="w1000">是否合格</div>
            <div class="w1000">数据</div>
            <div class="w1000">试验条件</div>
            <div class="w1000">多媒体</div>
          </div>
          <div class="tbodys" v-loading="listLoading">
            <div class="tbody justify-content-between" v-for="(item, index) in TestResultData" :key="index">
              <div class="w500">{{index + 1}}</div>
              <div class="w1000">{{item.deviceCode}}</div>
              <div class="w1000">{{item.deviceName}}</div>
              <div class="w1000">{{item.proName}}</div>
              <div class="w1000">{{item.testInfo}}</div>
              <div class="w1000">{{item.judge}}</div>
              <div class="w1000" v-if="item.qualifyVal">{{item.qualifyVal.code == 'Y' ? '是' : '否'}}</div>
              <div class="w1000" v-else>————</div>
              <div class="w1000">{{item.data.code == 'Y' ? item.dataTxt : '————'}}</div>
              <el-tooltip placement="bottom" effect="light">
                <div slot="content" class="fs18">{{item.factorTxt}}</div>
                <div class="w1000 text-overflow-2">{{item.factor.code == 'Y' ? item.factorTxt : '————'}}</div>
              </el-tooltip>
              <div class="w1000 color285FE3 cursor-pointer text-underline" v-if="item.media.code == 'Y' && item.mediaIds" @click="lookAttachment(item.mediaIds)">查看</div>
              <div class="w1000" v-else>暂无</div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="theader justify-content-between">
            <div class="w500">序号</div>
            <div class="w1000">试验项目</div>
            <div class="w1000">测试项</div>
            <div class="w1000">检查判据</div>
            <div class="w1000">是否合格</div>
            <div class="w1000">数据</div>
            <div class="w1000">试验条件</div>
            <div class="w1000">多媒体</div>
          </div>
          <div class="tbodys" v-loading="listLoading">
            <div class="tbody justify-content-between" v-for="(item, index) in TestResultData" :key="index">
              <div class="w500">{{index + 1}}</div>
              <div class="w1000">{{item.proName}}</div>
              <div class="w1000">{{item.testInfo}}</div>
              <div class="w1000">{{item.judge}}</div>
              <div class="w1000" v-if="item.qualifyVal">{{item.qualifyVal.code == 'Y' ? '是' : '否'}}</div>
              <div class="w1000" v-else>————</div>
              <div class="w1000">{{item.data.code == 'Y' ? item.dataTxt : '————'}}</div>
              <el-tooltip placement="bottom" effect="light">
                <div slot="content" class="fs18">{{item.factorTxt}}</div>
                <div class="w1000 text-overflow-2">{{item.factor.code == 'Y' ? item.factorTxt : '————'}}</div>
              </el-tooltip>
              <div class="w1000 color285FE3 cursor-pointer text-underline" v-if="item.media.code == 'Y' && item.mediaIds" @click="lookAttachment(item.mediaIds)">查看</div>
              <div class="w1000" v-else>暂无</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <video-dialog v-if="videoDialog" :src="videoSrc" @close="videoDialog=false"/>
  </div>
</template>

<script>
import videoDialog from '@/components/VideoDialog.vue'
export default {
  name: "TestResults",
  props: {
    taskData: Object,
  },
  components: {videoDialog},
  data() {
    return {
      taskId: "", //设备编号val
      taskList: [], //设备编号数据
      modelType: "SBQT", //环节val
      TestResultData: [], //试验结果数据
      listLoading: false, //列表加载中
      reportLoading: false, //报告生成加载中
      lookLoading: false,
      videoDialog: false,
      videoSrc: ''
    };
  },
  created() {
    console.log(this.taskData)
    this.getTaskCanUseList();
    this.getTestResult();
  },
  methods: {
    // 关闭弹窗
    cancel() {
      this.$emit("cancel");
    },
    // 查询可分配任务
    getTaskCanUseList() {
      let _this = this;
      let params = {
        taskId: _this.taskData.id,
      };
      _this.axios
        .getFactoryNumber(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.taskList = res.data.list;
          }
        })
        .catch(function (error) {
          _this.$message.error(error.msg);
        });
    },
    // 报告生成
    exportFile() {
      let _this = this;
      let params = {
        matchId: _this.taskData.matchIds,
      };
      _this.reportLoading = true;
      _this.axios
        .downloadReportFile(params)
        .then((res) => {
          if (res) {
            let fileName = _this.taskData.matchNames + '试验报告.docx'
            let blob = new Blob([res]);
            let linkNode = document.createElement("a");
            linkNode.download = fileName;
            linkNode.style.display = "none";
            linkNode.href = URL.createObjectURL(blob);
            document.body.appendChild(linkNode);
            linkNode.click();
            URL.revokeObjectURL(linkNode.href);
            document.body.removeChild(linkNode);
          }
          _this.reportLoading = false;
        })
        .catch(function (error) {
          _this.reportLoading = false;
          _this.$message.error(error.msg);
        });
    },
    // 查询试验项目结果
    getTestResult() {
      let _this = this;
      let params = {
        matchId: _this.taskData.matchIds,
        modelType: _this.modelType,
      };
      _this.listLoading = true;
      _this.axios
        .getTestResultsList(params)
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            _this.TestResultData = res.data.list;
          }
          _this.listLoading = false;
        })
        .catch(function (error) {
          _this.listLoading = false;
          _this.$message.error(error.msg);
        });
    },
    /**
     * 查看附件
     * @param {Number} id - 附件id
     */
    lookAttachment(id) {
      let _this = this;
      let idArr = id.split(',');
      let picArr = [];
      _this.listLoading = true;
      idArr.forEach((item, index) => {
        _this.axios.downloadFile({
          attachId: item
        }).then((res) => {
          console.log(res);
          if (res.status == 200) {
            let blob = new Blob([res.data]);
            picArr.push(URL.createObjectURL(blob))
            console.log(index, idArr.length)
            if (index == idArr.length - 1) {
              _this.listLoading = false;
              _this.$imageView(picArr)
            }
          }
        }).catch(function (error) {
          // _this.listLoading = false;
          // _this.$message.error(error.msg);
        });
      });
    },
  },
};
</script>

<style scoped lang='less'>
.test-results {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .shade {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
  .popup {
    width: 12.43rem;
    height: 7.46rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0.05rem 0.15rem 0 rgba(0, 21, 54, 0.25);
    .title {
      width: 100%;
      height: 0.58rem;
      background-color: #285fe3;
      padding: 0 0.25rem 0 0.4rem;
      img {
        width: 0.23rem;
        height: 0.23rem;
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      padding: 0.15rem 0.4rem 0;
      .c-title {
        width: 100%;
        height: 0.34rem;
        .btn {
          width: 1.16rem;
          height: 0.34rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #316eff;
          background: linear-gradient(0deg, #d8dce7 0%, #ffffff 100%);
          border-radius: 0.03rem;
          margin-left: 0.2rem;
          cursor: pointer;
          img {
            width: 0.16rem;
            height: 0.2rem;
            margin-right: 0.06rem;
          }
          span {
            font-size: 0.18rem;
            color: #285fe3;
          }
        }
      }
      .theader {
        width: 100%;
        height: 0.36rem;
        background: #f4f5f8;
        border: 1px solid #d0d6e3;
        border-radius: 0.03rem;
        padding: 0 0.2rem;
        font-size: 0.18rem;
        color: #505971;
        margin-top: 0.21rem;
        div {
          text-align: center;
        }
      }
      .tbodys {
        width: 100%;
        height: 5.04rem;
        overflow-y: scroll;
      }
      .tbodys::-webkit-scrollbar {
        display: none;
      }
      .tbodys {
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .tbody {
        width: 100%;
        min-height: 0.6rem;
        border: 1px solid #d0d6e3;
        border-radius: 0.03rem;
        font-size: 0.18rem;
        color: #161d2e;
        padding: 0 0.2rem;
        margin-top: 0.03rem;
        div {
          text-align: center;
        }
      }
      .w500 {
        width: 5%;
      }
      .w1000 {
        width: 10%;
      }
    }
  }
}
</style>